<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div ul{
            line-height: 10px;
        }
        div {
height: 100px;
            border: 2px solid red;
            background-color: gray;

        }
        div ul li {

            display: inline-block;
            text-decoration: none;

        }
        div ul li.c {
            margin-right: 30px;



        }
       div ul li a img {

            vertical-align: middle;
        }
        div ul li a{
            color: white;
            text-decoration: none;
        }
        div ul li a:hover {
            color: blue;
        }
        div ul li#ddl {

            border-radius: 100px 100px 100px 100px;
            padding: 15px 30px 15px 30px;
            box-shadow: inset 1px 1px 1px 1px yellow;

        }
        div ul li a.dl {
              text-indent: 2em;
                 color: yellow;

        }
        div ul li a.hy {
            color: red;
        }
        div ul li#hhy {
background-color: yellow;
            border-radius: 100px 100px 100px 100px;
            padding: 15px 30px 15px 30px;
            box-shadow: inset 1px 1px 1px 1px yellow;
            margin-left: 10px;
        }
        ul li#img {
            margin-left: 30px;
        }
        ul li#ddl:hover{
            background-color: yellow;

        }
        ul li#ddl:hover>a {

            background-color: yellow;
            color: blue;
           }
        ul li#hhy a:hover{
            color: blue;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li class="c" id="img"><a href="#"><img src="logo.png" height="100px" width="170px"/></a></li>
        <li class="c"><a href="https://www.baidu.com">功能特权</a></li>
        <li class="c"><a href="#">游戏特权</a></li>
        <li class="c"><a href="#">生活特权</a></li>
        <li class="c"><a href="#">会员活动</a></li>
        <li class="c"><a href="#">成长体系</a></li>
        <li class="c"><a href="#">年费专区</a></li>
        <li class="c"><a href="#">超级会员</a></li>
        <li id="ddl"><a href="#" class="dl">登录</a></li>
        <li id="hhy"><a href="#" class="hy">开通超级会员</a></li>
    </ul>
</div>

</body>
</html>